<template>
    <div class="tabbar-bg">
        <div class="l-btn" :class="{'logoHide': rightNav}">
            <Icon class="yun-logo"></Icon>
        </div>
        <div class="r-btn" :class="{'rightNav': rightNav}" @click="navBtn">
            <Icon class="nav-ic"></Icon>
        </div>
            <!--<Icon type="md-menu" size="30" />-->
        <Drawer :closable="false" v-model="rightNav" width="30%" class="right-nav">
            <Button to="/index" type="text" ghost>首页</Button>
            <Button to="" @click="toFrom(list[0].type,list[0].title)" type="text" ghost>{{list[0].title}}</Button>
            <Button to="" @click="toFrom(list[1].type,list[1].title)" type="text" ghost>{{list[1].title}}</Button>
            <Button to="" @click="toFrom(list[2].type,list[2].title)" type="text" ghost>{{list[2].title}}</Button>
            <Button to="" type="text" ghost>玩乐</Button>
            <Button to="/shopFront" type="text" ghost>楼层导览</Button>
            <Button to="/memSer" type="text" ghost>会员服务</Button>
            <Button to="/serFaci" type="text" ghost>服务设施</Button>
            <Button to="/comments" type="text" ghost>意见收集</Button>
        </Drawer>
    </div>
</template>
<script>
import Icon from 'iview/src/components/icon/icon'
export default {
  name: 'rTab',
  components: {Icon},
  methods: {
    navBtn () {
      this.rightNav = !this.rightNav
    },
    toFrom (type,title){
      console.log(type,title)
      this.$router.push({
        path: '/listFrom',
        query: {
          type: type,
          title: title
        }
      })
    }
  },
  data () {
    return {
      rightNav: false,
      list:[{
        type: '001',
        title: '美食'
      }, {
        type: '002',
        title: '购物'
      }, {
        type: '004',
        title: '生活'
      }]
    }
  }
}
</script>
<style>
    .tabbar-bg{
        width: 100%;
        height: 50px;
        background-color:#363241;
    }
    .yun-logo{
        background-image: url(../assets/yun-logo.png);
        width:100%;
        height: 100%;
        background-position: center center;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
    }
    .l-btn{
        position: absolute;
        left:10px;
        top: 10px;
        width: 30px;
        height: 30px;
    }
    .nav-ic{
        background-image: url(../assets/nav_ic.png);
        width:100%;
        height: 100%;
        background-position: center center;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
    }
    .r-btn{
        position: absolute;
        right:10px;
        top: 16px;
        width: 20px;
        height: 18px;
    }
    .rightNav{
        right: 32%;
        transition: right .3s ease-in-out;
    }
    .logoHide{
        display: none;
    }
    .right-nav a,button{
        color: #fff;
        width: 100%;
        box-shadow: none!important;
    }
    .ivu-btn{
        padding: 10px 15px!important;
    }
    .right-nav .ivu-drawer-mask{
        background-color: rgba(55, 55, 55, 0);
    }
</style>
